<script setup>
const props = defineProps({
  commentList: {
    type: Object,
    default: () => ([])
  }
})
</script>
<template>
  <div class="goods-comment">
    <div class="comment-list">
      <div class="comment-item" v-if="commentList.length > 0" v-for="(item, index) in commentList" :key="index">
        <el-row>
          <el-col :span="8"  offset="8">{{ item.userName }}</el-col>
          <el-col :span="8">
            <el-rate v-model="item.rate" size="large" disabled />
          </el-col>
        </el-row>
        <div class="comment-body">
          {{ item.comment }}
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无评论">
        </el-empty>
      </div>

    </div>
  </div>
</template>

<style scoped>
.goods-comment {
  padding: 20px;
}

.comment-item {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-header {
  margin-bottom: 10px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-time {
  font-size: 14px;
  color: #999999;
}

.comment-body {
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}
</style>